import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {AppearanceType} from "../../../script/frame/dataSource/DataModel";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, UISyncData, SyncId, View} from "../../../script/frame/apiModel/gui/React";
import PageContent, {PageContentType} from "../component/PageContent";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {AppearanceBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {publicGui} from "../../interface/PublicGui";

interface IProp {
    pageContentType: PageContentType;
    getAchFun: (player: PlayerModel) => { [key: string]: number }
}
interface IState {
    achs: {[p: string]: number};

    title: string;
    subTitle: string;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}


export default class AppearanceBar extends AppearanceBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            achs: {},

            infoVisible: false,
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        const allAppearance = DataRouter.getAppearanceDatas();
        let achItems: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.appGuiItemMaps);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);
        let defaultApp: string = Configer.getResource(ResourceKey.defaultApp);
        const iconSize = { h: 0.0581, w: 0.04375 }
        const onePageNum = 30;

        return <PageContent  type={this.props.pageContentType} closeFun={this.close} hidden={!this.state.visible}   key={GuiKeys.pageContentApp} selectItemMap={achItems} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                let eles = [];
                eles.push(<View   key = {`${GuiKeys.achBarResumeItem}`} onMouseDown={ () => { return this.clickApp('', selectKey, false) }} style={{ backgroundImage: defaultApp, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}></View>)
                eles.push( ...allAppearance.map(
                    (appData, index, array) => {
                        const type = appData?.type;
                        if (type === selectKey && appData && appData.id?.length > 0) {
                            const appId = appData.id;
                            const achId = appData.ach;
                            const achData = DataRouter.getAchievementDataByAchievementId(achId);
                            if (achData) {
                            } else {
                                Logger.toastError(`外观 ${appId} 未配置对应成就 ${achId}`)
                            }
                            const iconPath = achData?.iconPath;
                            const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                            const backgroundImage = resourceData?.src;
                            let disable = true;
                            let mask = disableBlp;
                            let achNum = 0;
                            if (this.state.achs) {
                                achNum = this.state.achs[achId];
                            }
                            if (achNum && achNum > 0) {
                                disable = false;
                                mask = '';
                            }
                            return <View onMouseDown={ () => { return this.clickApp(appId, type, disable) }} onMouseEnter={(event) => { this.showInfoPage(achData?.name, '', achData?.descript, event.x + iconSize.w, event.y) }} onMouseLeave={this.closeInfoPage}   key = {`${GuiKeys.achBarItem}|${index}`} style={{ mask, backgroundImage: backgroundImage, width: iconSize.w, height: iconSize.h, marginT: 0.008, marginL: 0.008 }}></View>
                        }
                        return <View   key = {`${GuiKeys.achBarItem}|${index}`} style={{ hidden: true }}></View>
                    }
                ))
                return eles;
            }
        }>
        </PageContent>
    }

    showInfoPage = (title: string, subTitle: string, des: string, x: number, y: number) => {
        publicGui.showInfoPage(x, y, title, subTitle, des);
    }

    clickApp = (appId: string, type: AppearanceType, disable: boolean) => {
        if (disable) {
            Logger.toastError('当前外观未拥有', PlayerFactory.getInstance().getLocalPlayer())
            return;
        }
        const syncData: UISyncData = { id: SyncId.useAppearance, param: { appId: appId, type: type } };
        return syncData
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    close = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.appBar } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const achs = this.props.getAchFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            achs,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}